<template>
    <div class="qrcode-card">
        <!-- 显示二维码 -->
        <img :src="qrDataUrl" alt="QR Code" />
        <!-- 下载二维码按钮 -->
        <a-button @click="downloadQRCode">{{ $t('btns.downloadQrcode') }}</a-button>
    </div>
</template>

<i18n>
  {
    "zh-CN": {
      "btns":{
        "downloadQrcode":"下载二维码"
      }
    },
    "en-US": {
      "btns":{
        "downloadQrcode":"Download QR code"
      }
    },
    "fr-FR": {
      "btns":{
        "downloadQrcode":"Télécharger le Code QR"
      }
    }
  }
</i18n>

<script>
import QRCode from 'qrcode';
export default {
    name: "QrCodeCard",
    data() {
        return {
            qrDataUrl: '' // 存储二维码图片的 Data URL  
        };
    },
    props:{
        qrValue:{
            type: String,
            default: ""
        },
        qrTag:{
            type: String,
            default: ""
        }
    },
    // mounted() {
    //     this.generateQRCode();
    // },
    watch: {
        qrValue: {
            handler(newVal) {
                console.log("qrValue---------------------watch");
                this.generateQRCode();
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        async generateQRCode() {
            const qrCodeDataUrl = await QRCode.toDataURL(this.qrValue)
            // 创建一个新的 canvas 元素  
            const canvas = document.createElement('canvas')  
            const ctx = canvas.getContext('2d')  

            // 设置 canvas 大小（根据二维码大小和文本大小调整）  
            const qrCodeSize = 200  
            const textSize = 16  
            const padding = 10  
            canvas.width = qrCodeSize + padding * 2  
            canvas.height = qrCodeSize + textSize + padding * 2 

            // // 设置背景颜色为白色  
            // ctx.fillStyle = '#FFFFFF';  
            // // 填充整个画布区域  
            // ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制二维码  
            const qrCodeImage = new Image()  
            qrCodeImage.src = qrCodeDataUrl;
            qrCodeImage.onload = () => {  
                ctx.drawImage(qrCodeImage, padding, padding, qrCodeSize, qrCodeSize)  
        
                // 绘制文本  
                ctx.font = `${textSize}px Arial`  
                ctx.fillStyle = 'black'  
                ctx.textAlign = 'center'  
                ctx.textBaseline = 'middle'  
                ctx.fillText(this.qrTag, canvas.width / 2, qrCodeSize + padding + 20)  
        
                // 将 canvas 内容转换为图像数据并下载  
                // this.downloadCanvasAsImage(canvas, 'device_qrcode.png')  
                this.qrDataUrl = canvas.toDataURL('image/png')  
            }  
            // QRCode.toDataURL(this.qrValue, (err, url) => {
            //     if (err) throw err;
            //     this.qrDataUrl = url;
            // });
        },
        createQRCode() {
            QRCode.toDataURL(this.qrValue, (err, url) => {
                if (err) throw err;
                this.qrDataUrl = url;
            });
        },
        downloadQRCode() {
            const link = document.createElement('a')  
            link.href = this.qrDataUrl
            link.download = this.qrTag + '.png'
            link.click()
        }
    }
}
</script>

<style lang="less" scope>
.qrcode-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>